<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-14 08:52:35
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2023-12-27 15:36:26
 * @FilePath: \smart-community\src\components\VCharts\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="chart_content" ref="chartRef">
  </div>
</template>

<script setup name="VCharts">
import { getCurrentInstance,ref ,onMounted} from "vue";
defineOptions({
  name: "VCharts",
});
let props = defineProps({
  chartOption:{
    type:Object,
    default:()=>{}
  }
})


let _this = getCurrentInstance().appContext.config.globalProperties;
let chartRef = ref(null)
// vue3获取refs

function initChart() {
  // 基于准备好的dom，初始化echarts实例
  const chart = _this.$echarts.init(chartRef.value);
  // 绘制图表
  chart.setOption(props.chartOption);
}

// 页面加载时执行
onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.chart_content{
  height: 100%;
  height: 100%;
  font-size: 0.92rem;
}
</style>